<template>
	<view class="music">
		<!-- 顶栏 -->
		<top-bar></top-bar>
		<!-- 控制栏 -->
		<tab-list :list="['推荐电台','排行榜']" @itemClick="tabClick"></tab-list>
		<!-- 推荐页面 -->
		<re-radio v-show="show"></re-radio>
		<!-- 排行页面 -->
		<rank v-show="!show"></rank>
	</view>
</template>
 
<script>
	import TopBar from "./TopBar"
	import ReRadio from "./ReRadio" 
	import Rank from "./Rank"
	
	import TabList from "@/components/common/TabList"
	
	export default {
		name: '',
		data(){
			return {
				show: true
			}
		},
		methods:{
			tabClick(index) {
					this.show = !Boolean(index)
			}
		},
		onLoad() {
			
		},
		components: { TopBar, TabList, ReRadio, Rank }
	}
</script>
 
<style lang="less" scoped>
	.re_radio {
		z-index: 1;
	}
	.tab_list {
		position: sticky;
		top: 0px;
		z-index: 1;
		background-color: #fff;
	}
</style>
